<template>
	<view>
		<view class="LoginPage">
			<view class="logo">
				<image class="img" src="/static/images/index/logo.png" mode=""></image>
				<view>{{$t('login.greeting-l1')}}</view>
				OTC
			</view>
			<view class="form">
				<form>
					<view class="uni-form-item uni-column" style="position: relative">
						<view class="title"><!-- 账号 -->{{$t('login.input-account')}}</view>
						<input class="uni-input" type="text" v-model="formData.account"
							:placeholder="$t('login.input-account-placeholder')" /> <!-- 请输入账号 -->
						<!-- <view class="code" @click="handleCode">
							{{ counting ? $t('chongxinhuoquyanzhengma', {count}) : $t('huoquyanzhengma') }}
						</view> -->
					</view>
					<!-- <view class="uni-form-item uni-column">
						<view class="title">{{$t('login.input-yanzhengma')}}</view>
						<input class="uni-input" name="captcha" v-model="formData.captcha"
							:placeholder="$t('login.input-yanzhengma-placeholder')" maxlength="6" />
					</view> -->
					<view class="uni-form-item uni-column" style="position: relative">
						<view class="title"><!-- 密码 -->{{$t('login.input-password')}}</view>
						<input class="uni-input uni-inputpass" type="password" v-model="formData.password"
							name="password" maxlength="20" :placeholder="$t('login.input-password-placeholder')"
							:password="showPassword" /> <!-- 请输入密码 -->
						<!-- <image class="eye"
							:src="showPassword? '/static/images/index/eyes.png': '/static/images/index/openeye.png' "
							@click="changePassword"></image> -->
					</view>
					<view class="uni-form-item uni-column" style="position: relative;">
						<!-- 						<view class="zc">还没有密码？<span @tap="register">立即注册</span>
						</view> -->
						<view class="wj" @tap="restpwd">{{$t('login.but.forgot-password')}}<!-- 忘记密码 --></view>
					</view>
					<view class="uni-btn">
						<button class="uni-btn-v" @click="formSubmit">{{$t('queren')}}</button>
					</view>
					<!-- 同意服务条款 -->
					<checkbox-group class="auth-clause" @change="CheckboxChange">
						<checkbox class="orange" :class="checked ? 'checked' : ''" :checked="checked ? true : false"
							value="agree" />
						<view>
							{{$t('agree')}}
							<!-- @tap="onDetails($store.state.common.appConfig.user_agreement,'《易联道商城用户服务协议》',checked)" -->
							<text
								@tap="$refs.wanl_agree.show($store.state.common.appConfig.user_agreement,`《${$t('yiliandaoshangchengyonghuxieyi')}》`,checked,false)">
								《{{$t('yiliandaoshangchengyonghuxieyi')}}》
							</text>
						</view>
					</checkbox-group>
				</form>
				<view class="goregist">
					<text @tap="register">{{$t('login.but.sign-in')}}<!-- 没有账号,去注册 --></text>
				</view>
			</view>
		</view>
		<wanl-agree ref="wanl_agree" @agree="onAgree"></wanl-agree>
	</view>
</template>
<script>
	import graceChecker from "@/common/graceChecker";
	export default {
		data() {
			return {
				formData: {
					account: '',
					captcha: '',
				},
				parent_user_id: '',
				checked: false,
				showPassword: true,
				imgUrl: "",
				count: 60,
				counting: false,
			};
		},
		onLoad(options) {
			if (options && options.parent_user_id) {
				this.parent_user_id = options.parent_user_id
			}
		},
		methods: {
			// 发送手机动态码
			handleCode() {
				if (this.counting) return;
				var reg = /^1[3456789]\d{9}$/;
				if (!reg.test(this.formData.account)) {
					uni.showToast({
						title: this.$t('login.toast-sjhgscw'), // "请输入正确的手机格式",
						icon: "none",
					});
					return;
				}
				this.getCaptcha();
			},
			// 获取验证码的接口
			getCaptcha() {
				uni.request({
					url: "/sms/send",
					method: "POST",
					data: {
						event: "mobilelogin",
						mobile: this.formData.account,
					},
					success: (res) => {
						this.$wanlshop.msg(this.$t('login.toast-yzmfscg'));
						this.counting = true;
						const timer = setInterval(() => {
							this.count--;
							if (this.count <= 0) {
								clearInterval(timer);
								this.counting = false;
								this.count = 60; // 重置倒计时时长
							}
						}, 1000);
					},
				});
			},
			handleDown() {
				this.$wanlshop.to(`/pages/downApp`);
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			CheckboxChange(e) {
				let that = this
				if (e.detail.value.length) {
					if (this.formData.account == '') {
						return this.$wanlshop.msg(this.$t('login.toast-account'));
					} else {
						that.checked = true;
					}
					// uni.request({
					// 	url: "/wanlshop/user/getUserStatus",
					// 	method: "POST",
					// 	data: {
					// 		password: that.formData.password,
					// 	},
					// 	success({
					// 		res
					// 	}) {
					// 		if (res.code == 1 && res.data == 1) {
					// 			that.checked = true;
					// 		} else {
					// 			that.onDetails(that.$store.state.common.appConfig.user_agreement,
					// 				`《${that.$t('yiliandaoshangchengyonghuxieyi')}》`,
					// 				that.checked)
					// 		}
					// 	}
					// });
				} else {
					that.checked = false;
				}
			},
			onDetails(id, title, checked) {
				this.$refs.wanl_agree.show(id, title, checked);
			},
			onAgree(image) {
				if (image) {
					this.imgUrl = image;
					this.checked = true;
				}
			},
			// 账户登录
			formSubmit(e) {
				let that = this
				if (this.checked) {
					// ..检查是否注册-没注册跳转注册
					if (!this.formData.password) {
						return this.$wanlshop.msg(this.$t('login.toast-account'));
					} else if (!this.formData.password) {
						return this.$wanlshop.msg(this.$t('login.toast-password')); // '请输入密码'
					}

					uni.request({
						url: "/wanlshop/user/login",
						method: "POST",
						data: {
							account: this.formData.account,
							captcha: this.formData.captcha,
							parent_user_id: this.parent_user_id,
							password: this.formData.password,
							image: this.imgUrl,
						},
						success(res) {
							that.$store.dispatch("user/login", res.data);
							uni.switchTab({
								url: '/pages/newPage/quotation'
							})
						}
					});
				} else {
					setTimeout(() => {
						this.$wanlshop.msg(this.$t('toast.agree-user-agreement'));
					}, 300);
				}
			},
			register() {
				this.$wanlshop.to(`/pages/user/auth/register`);
			},
			restpwd() {
				this.$wanlshop.to(`/pages/user/auth/resetpwd`);
			}
		},
	};
</script>
<style>
	page {
		min-height: 100vh;
		background: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	@import url("auth.css");


	.LoginPage {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background-image: url("/static/images/index/bg.png");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100% 242rpx;
		padding-top: 40rpx;

		.down {
			color: #666666;
			font-size: 28rpx;
			position: absolute;
			top: 40rpx;
			right: 20rpx;
		}

		.logo {
			// width: 162rpx;
			height: 162rpx;
			margin: 0 auto;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			text-align: center;

			.img {
				width: 152rpx;
				height: 152rpx;
				margin-bottom: 36rpx;
			}
		}

		.form {
			padding: 0 24rpx;
			margin-top: 160rpx;
			clear: both;

			.uni-input {
				height: 96rpx;
				line-height: 96rpx;
				background: #f8f8f8;
				padding: 0 30rpx;
				margin-top: 20rpx;
				border-radius: 16rpx;
			}
		}

		.uni-form-item {
			margin-top: 20rpx;

			.code {
				font-size: 28rpx;
				color: #fc5351;
				position: absolute;
				right: 30rpx;
				top: 85rpx;
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			.eye {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 30rpx;
				top: 86rpx;
			}

			.wj {
				color: #eb5641;
				text-align: right;
			}
		}

		.uni-btn-v {
			width: 702rpx;
			height: 96rpx;
			background: #eb5641;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 40rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 96rpx;
		}

		.goregist {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			text-align: center;
			margin-top: 152rpx;
		}
	}
</style>